<template>
<div class="order"> 
 <main>
   <div class="top">
     <van-icon @click="tap" name="arrow-left" />
   </div>
   <div class="address">
     <p class="map"><van-icon name="location-o" /></p>
     <div>
       <h2>{{address.receiver}}<span>{{address.mobile}}</span></h2>
       <p>{{address.regions}}</p>
       <p>收费不便时,可选择免费暂存服务</p>
     </div>
     <van-icon @click="rightadd" class="right" name="arrow" />
   </div>
   <div class="products" >
     <van-checkbox-group v-model="result" ref="checkboxGroup">
      <div class="cart_item" v-for="(item,i) in proList" :key="i">
         <van-checkbox  @click="select(item)" :name="i"></van-checkbox>
         <van-card 
         :price="item.product.price"
         :desc="item.product.descriptions"
         :title="item.product.name"
         :thumb="item.product.coverImg"
         >
            <div slot="footer">
              <van-button size="mini" @click="deletePro(item._id)">删除</van-button>
            </div>
         </van-card>
         <van-stepper @change="onchange" v-model="quantity[i]" />
      </div>
     </van-checkbox-group>
    
   </div>
   
 </main>
 <footer>
   <van-submit-bar
  :price="sum"
  button-text="结算"
  @submit="onSubmit"
>
  <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
  <span slot="tip">
    你的收货地址不支持同城送, <span>修改地址</span>
  </span>
</van-submit-bar>
 </footer>
</div>
</template>

<script>
import * as api from '@/api/getProlist'
import * as cartApi from '@/api/cart'
import * as orderApi from '@/api/order'
import * as addressApi from '@/api/address'

export default {
    name:'Cart',
    data(){
      return{
        title:'购物车',
        msg:'编辑',
        checked:false,
        value:1,
        id:'',
        proList:'',
        result:[],
        time:0,
        quantity:[],
        address:'',
        sum:0,
        isSelected:[],
      }
    },
    computed:{
    },
    methods:{
      deletePro(id){
        this.$dialog.confirm({
          title: '是否删除',
          message: '该操作将该商品移出购物车'
        }).then(() => {
          cartApi.deleteCart(id).then(data=>{
            console.log(data)
            this.proList.map((item,i)=>{
              if(item._id==id){
                this.proList.splice(i,1)
              }
            })
            this.$toast('删除成功')
          })
        }).catch(() => {

        });
        
      },
      sumPrice(arr){
        console.log(this.quantity)
        let sum = 0;
        arr.map(v=>{
          console.log('被选中的商品',this.proList[v].product.name)
          let price = this.proList[v].product.price
          let num = this.quantity[v]
          console.log(price,num)
          sum += price*num
        })
        sum = sum * 100
        console.log(sum)
        this.sum = sum
      },


      onSubmit(){
        console.log(this.result)
        console.log(this.proList)
        let products = this.proList
        let orderDetails = []
        this.isSelected.map(v=>{
          
          cartApi.deleteCart(this.proList[v]._id).then(data=>{
            console.log(data)
            this.proList.splice(v,1)
          })

          let obj = {
            quantity:this.quantity[v],
            product:products[v].product._id,
            price:products[v].product.price
          }
          orderDetails.push(obj)
        }) 
        console.log(this.proList[this.result])
        console.log(orderDetails)
        orderDetails.map(v=>{
          console.log(v.product)
          
        })
        let params = {
          receiver:this.address.receiver,
          regions:this.address.regions,
          address:this.address.address,
          orderDetails:orderDetails
        }
        
        orderApi.addOrders(params).then(data=>{
          console.log(data)
          
          orderApi.getOrders({per:1}).then(data=>{
            console.log(data)
            this.$router.push('/writeOrder/'+data.data.orders[0]._id)
          })
        })
        cartApi.productCart(params).then((data)=>{
          console.log(data.data)
         
        })
      },
      rightadd(){
        this.$router.push('/myaddress')
      },
      tap(){
        this.$router.go(-1)
      },
      //单选
      select(item){
        
        this.proList.map((v,i)=>{
          if(v==item){
            if(this.result.length==0){
              this.isSelected.push(i) 
            }else{
              let index=this.result.indexOf(i)
              if(index==-1){
                this.isSelected.push(i)
              }else{
                this.isSelected.splice(index,1)
              }
            }
          }
        })
        console.log(this.isSelected.length)
        if(this.isSelected.length == this.proList.length){
          this.checked = true
        }else{
          this.checked = false
        }
        this.sumPrice(this.isSelected)
      },
      checkAll(){
        if(this.result.length<this.proList.length&&this.checked==false){
          this.$refs.checkboxGroup.toggleAll(true);
          this.checked = true;
          let arr = [];
          this.proList.map((v,i)=>{
            arr.push(i)
          })
          console.log(arr)
          this.isSelected = arr
        }else{
          this.$refs.checkboxGroup.toggleAll(false);
          this.checked = false;
          this.isSelected = []
        }
          this.sumPrice(this.isSelected)
      },
      
      //数量增加
      onchange(v){
        console.log(v)
        this.sumPrice(this.isSelected)
      }
    },
    mounted(){
      this.$emit('toparent',[this.title,2])
      this.time = 0;
      cartApi.productCart().then((data)=>{
        console.log(data.data)
        this.proList=data.data
        let quantity=[];
        data.data.map(v=>{
          quantity.push(v.quantity)
        })
        this.quantity = quantity
      })
      addressApi.addressList({per:1}).then(data=>{
        this.address = data.data.addresses[0]
        this.$store.state.address = this.address
        console.log(this.$store.state.address)
        let areas = this.address.regions.split('-')
        let newArr = []
        areas.map(v=>{
          if(newArr.indexOf(v) === -1){
            newArr.push(v)
          }
        })
        this.address.regions = newArr.join('')
      })
    }
}
</script>

<style scoped>
.van-card__footer{
  position: absolute;
  right:0px;
  top:5px;
}
.van-card__footer .van-button{
  border:0;
  color:red;
  font-size:12px;
}
.order{
  display: flex;
  flex-direction: column;
  /* position: relative; */
}
main{
  margin-bottom: 100px;
}
main .address{
  display: flex;
  padding: 10px 20px;
  margin-top: 10px;
  box-sizing: border-box;
  border-bottom: 1px dashed #999;
  border-top: 1px dashed #999;
}
main .address .map{
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg,rgb(248, 43, 7),rgb(250, 147, 99));
  text-align: center;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 7px;
  margin-right: 20px;
  margin-top: 10px;
}
main .address .map .van-icon{
  font-size: 26px;
  color: #fff
}
main .address div h2{
  font-size: 14px;
  color: #111;
  line-height: 26px; 
}
main .address div h2 span{
  margin-left: 10px;
  color: #333
}
main .address div p{
  line-height: 20px;
  color: #333;
  font-size:12px;
}
main .address .van-icon{
  font-size: 20px;
  color: #999; 
}
main .address div p:nth-of-type(2){
  color: rgb(247, 54, 54);
  font-size: 12px
}
main .address .right{
  margin: 15px 0 0 50px; 
}
main .top{
  display: flex;
  margin-top:5px;
}
 main .top .van-icon{  
  font-size: 24px;
}
main .top p{
  font-size: 14px;
  margin-left: 265px
} 
main{
  flex: 1;
  overflow: auto;
  padding: 0 15px;
}
main .products{
    margin-bottom: 20px;
    position: relative;
}
main .products .cart_item{
    display: flex;
    overflow: hidden;
    border-bottom:1px solid #ddd;
 
}
main .products .cart_item .van-card{
  width:200px;
  margin-bottom:10px;
}

main .products div .van-checkbox{
  font-size: 28px;
  color: #333;
  border-radius:50% ;
  /* border:1px solid red; */

}

main .products .van-stepper{
  color: #666;
  margin-top:80px;
  position:absolute;
  right:0;

}
main .products .van-card{
  flex:1;
}
main .products >>> .van-checkbox__icon--round .van-icon {
  border-color: #999;

}
main .products .van-card__title{
  font-size: 14px;
  margin:0 0 8px 0;  
}
main .products .van-card__desc{
  font-size: 12px;
  margin-bottom: 5px;
}
footer .van-submit-bar{
  padding: 10px
}
footer >>> .van-checkbox__icon .van-icon{
  border:1px solid #666;
}
main .products .van-card__desc[data-v-c7dd8b8c]{
  text-overflow: ellipsis!important;
  white-space: nowrap;
  overflow: hidden;
}
.van-card{
  background:#fff;
}
</style>